<template>
	<view class="contaner">
		<view class="content">
			<view class="item">
				<van-row>
					<van-col span="24">{{pamre.diseaseDesc}}</van-col>
<!-- 					  <van-col span="2"><view @click="collectClick">
					  	<van-icon v-if="collShow"  color="#02BF88" name="like-o" size="24" />
						<van-icon v-if="!collShow" color="#02BF88" name="like" size="24" />
					  </view> -->
					  </van-col>
				</van-row>
			</view>
			<text class="alList" v-for="(item, index) in arr" :key="index" :class="count == index ? 'avtive': ''" @click="titleClick(index)">{{ item }}</text>
			<view class="item1" v-show="count === 1">
				<view class="l-emiy" v-if="!num">暂无评价</view>
				<view v-else>
					<scroll-view
						scroll-y="true"
						:show-scrollbar="false"
						:enhanced="true"
						@scrolltolower="loadMore1"
						style="height: calc(100vh - 550rpx);"
					>
						<van-row v-for="item in discussArr" :key="item">
							<van-col span="4">
								<van-image
								v-if="item.imagUrl"
								  round
								  width="70rpx"
								  height="70rpx"
								  :src="item.imagUrl"
								/>
								<van-image
								v-else
								  round
								  width="70rpx"
								  height="70rpx"
								  src="https://img01.yzcdn.cn/vant/cat.jpeg"
								/>
							</van-col>
							  <van-col span="12">
								  <view style="color: #333333; font-size: 28rpx;">
								  	{{item.name}}
								  </view>
								  <view style="font-size: 28rpx; color: #666666;">
								  	{{item.content}}
								  </view>
							  </van-col>
							  <van-col span="8">
								  <view style="height: 38rpx;"></view>
								  <view><van-rate readonly :value="item.starLevel" size="16" color="#02BF88" /></view>
							  </van-col>
						</van-row>
					</scroll-view>
				</view>
			</view>
			<view class="item1" v-show="count === 0">
				<van-row v-if= "classify.length > 0">
				  <van-col span="8">
					  <scroll-view
					  	scroll-y="true"
					  	:show-scrollbar="false"
					  	:enhanced="true"
					  	style="height: calc(100vh - 520rpx);"
					  >
					  <view class="left-ment" v-for="(item, index) in classify" :key="index" :class="mentNum == index ? 'border-active': ''" @click="mentClick(item.id, index)">
							<view class="left-ment-top"><text class="text handLetterSpa">{{item.name}}</text></view>
							<view class="left-ment-middle">{{item.recureCount}}例，占比{{item.make}}%</view>
							<view><van-rate readonly :value="item.starLevel" size="10" color="#02BF88" /></view>
					  </view>
					  </scroll-view>
				  </van-col>
				  <van-col span="16">
					  <view class="right-list">
						  <view v-if= "means.length > 0">
						  <scroll-view
						  	scroll-y="true"
						  	:show-scrollbar="false"
							:enhanced="true"
						  	@scrolltolower="loadMore2"
						  	style="height: calc(100vh - 490rpx);"
						  >
					  	<van-row v-for="item in means" class="l-row" :key="item.id"  @click.native="setDiscuss(item)">
					  		<van-col span="7">
								<image v-if="item.imagUrl" :src="item.imagUrl" mode=""></image>
								<image v-else src="../../../static/noPictures.jpg" mode=""></image>
							</van-col>
					  		  <van-col span="17">
								  	<view style="padding-left: 16rpx;">
								  		<view style="font-size: 28rpx;">{{item.remarks}}</view>
								  		<view style="color: #999; font-size: 22rpx;">{{item.recureCount}}例</view>
								  			<view style="display: flex;">
								  				<van-rate readonly style="flex: 1;" :value="item.starLevel" size="10" color="#02BF88" />
								  				<van-button type="primary" round  size="small">评价</van-button>
								  			</view>
								  	</view>
					  		  </van-col>
					  	</van-row>
						</scroll-view>
						</view>
						<view class="l-emiy" v-else>暂无数据</view>
					  </view>
				  </van-col>
				</van-row>
				<view class="l-emiy" v-else>暂无数据</view>
			</view>
		</view>
		<van-toast id='van-toast'/>
	</view>
</template>

<script>
import { getClassify, getCureList, getDiscussList } from '@/api/appraising.js'	
import { fileById } from '@/api/common.js'
	export default {
		data() {
			return {
				// arr: ['康复方式', '评价'],
				arr: ['康复方式'],
				classify: [],
				means: [],
				discussArr: [],
				ggShow: false,
				pamre: {},
				activeKey: 0,
				count: 0,
				collShow: true,
				value: 3,
				active: 1,
				mentNum: 0,
				num: 0,
				total: 0,
				curreId: '',
				totals: 0,
				paginations: {
					pageSizes: 10,
					pageNums: 1
				},
				pagination: {
					pageSize: 6,
					pageNum: 1
				}
			}
		},
		onShow() {
			this.getfl()
		},
		onLoad(data) {
			if(data !== null) {
				this.pamre = JSON.parse(data.data)
				this.mentNum = data.mentNum || 0
				this.getfl()
				uni.setNavigationBarTitle({
				        　　title: this.pamre.name
				  })
			}
		},
		methods:{
			reset() {
				this.total = 0,
				this.totals = 0,
				this.paginations = {
					pageSizes: 10,
					pageNums: 1
				},
				this.pagination = {
					pageSize: 6,
					pageNum: 1
				}
			},
			titleClick(num) {
				switch(num){
					case 0:
					// this.arr = ['康复方式', '评价']
					this.arr = ['康复方式']
					this.reset()
					break
					case 1:
					this.reset()
					this.getpl()
					break
				}
				this.count = num
			},
			mentClick(id, num) {
				this.mentNum = num
				this.curreId = id
				this.reset()
				this.getCure(id)
			},
			getpl(more) {
				if (this.classify.length > 0) {
					let param = {
						classifyId: this.classify[this.mentNum].id,
						pageSize: this.paginations.pageSizes,
						pageNum: this.paginations.pageNums
					}
					getDiscussList(param).then(res => {
						const newData = res.data
						this.total = newData.total
						this.num = newData.total
						this.arr.splice(1, 1, `评价(${this.num})`)
						var arr = newData.rows
						if (more === 'more') {
						if (arr.length > 0) {
							arr.forEach(t => {
								this.discussArr.push(t)
								if (t.headPortrait) {
									fileById({fileId: t.headPortrait}).then(r => {
										this.$set(t, 'imagUrl', r.data.accessUrl)
									})
								}
							})
						} else {
							this.$toast.fail('没有更多评价了');
						}
						} else {
							this.discussArr = arr
							this.discussArr.forEach(t => {
								if (t.headPortrait) {
									fileById({fileId: t.headPortrait}).then(r => {
										this.$set(t, 'imagUrl', r.data.accessUrl)
									})
								}
							})
						}
					})
				}
			},
			getfl(id) {
				getClassify({diseaseId: this.pamre.id, pageNum: 1, pageSize: 1000}).then(res => {
					this.classify = []
					const newData = res.data.rows
					var num = 0
					newData.forEach(t => {
						num += t.recureCount
					})
					newData.forEach(t => {
						if(t.recureCount !== 0) {
							t.make = ((t.recureCount / num)* 100).toFixed(2)
						} else {
							t.make = 0
						}
						this.classify.push(t)
					})
					this.curreId = this.classify[this.mentNum].id
					this.getCure(this.classify[this.mentNum].id)
				})
			},
			getCure(ids, str) {
				let param = {
					classifyId: ids,
					...this.pagination
				}
				getCureList(param).then(res => {
					const arr = res.data.rows
					 this.total = res.data.total
					if (str === 'more') {
						arr.forEach(t => {
							if(t.imgTheme) {
								fileById({fileId: t.imgTheme}).then(res => {
									t.imagUrl = res.data.accessUrl
									this.means.push(t)
								})
							} else {
								this.means.push(t)
							}
						})
					} else {
						arr.forEach((t, index) => {
							if(t.imgTheme) {
								 fileById({fileId: t.imgTheme}).then(res => {
									this.$set(t, 'imagUrl', res.data.accessUrl)
								})
							}
						})
						this.means = [...arr]
					}
				})
			},
			collectClick() {
				this.collShow = !this.collShow
			},
			onChange(index) {},
			loadMore1() {
				if ((this.paginations.pageSizes * this.pagination.pageNums) >= this.totals) {
				  return
				}
				this.paginations.pageNums++;
				this.getpl('more')
			},
			loadMore2() {
				console.log('emteu')
				if ((this.pagination.pageSize * this.pagination.pageNum) >= this.total) {
				  return
				}
				this.pagination.pageNum++;
				this.getCure(this.curreId, 'more')
			},
			setDiscuss(item) {
				// 通往评论方法页面
				uni.navigateTo({
				        url: '/packageA/pages/signUp/writeCommon?data=' + JSON.stringify(item),
				 });
			}
		}
	}
</script>

<style scoped lang="scss">
.contaner {
	     height: 100vh;
		background-color: #F8F8F8;
		box-sizing: border-box;
		padding: 24rpx 32rpx 58rpx;
		// overflow: auto;
		.content {
			height: 100%;
			.item1,.item {
				background-color: #FFFFFF;
				position: relative;
				width: 100%;
				border-radius: 16rpx;
				padding: 24rpx 16rpx;
				color: #323233;
				font-size: 32rpx;
				line-height: 44rpx;
				box-sizing: border-box;
				margin-bottom: 24rpx;
			}
			.item1 {
				box-sizing: border-box;
				overflow: hidden;
				height: calc(100vh - 480rpx);
				padding: 36rpx 16rpx 0 16rpx;
				z-index: 9;
				/deep/ .van-row {
					margin-bottom: 40rpx;
				}
				.left-ment {
					width: 100%;
					box-sizing: border-box;
					height: 180rpx;
					padding-top: 36rpx;
					padding-bottom: 24rpx;
					border-bottom: 1px solid #EBEDF0;
					.left-ment-top {
						height: 60rpx;
						overflow: hidden;
						width: 100%;
						font-size: 24rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 30rpx;
					}
					.left-ment-middle {
						width: 100%;
						height: 32rpx;
						font-size: 22rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						line-height: 32rpx;
					}
					.left-ment-footer {
						width: 100%;
						height: 100%;
					}
				}
				.right-list {
					padding-left: 16rpx;
					height: calc(100vh - 410rpx);
					position: relative;
					image {
						width: 60px;
						height: 60px;
						border-radius: 8px;
					}
					/deep/ .van-button--round {
						width: 104rpx; height: 48rpx;
					}
					/deep/ .van-row {
						margin-bottom: 44rpx;
					}
				}
				.border-active {
					border-bottom: 1px solid #02BF88;
				}
			}
			.alList {
				width: 160rpx;
				text-align: center;
				margin-bottom: 16rpx;
				display: inline-block;
				font-size: 28rpx;
				color: #999999;
				font-weight: 600;
			}
			.avtive {
				color: #333;
				position: relative;
			}
			.avtive::after {
			    content: "";
			    display: block;
			    width: 40px;
			    height: 3px;
				margin-top: 18rpx;
				margin-left: 36rpx;
			    background-color: #02BF88
			  }
		}
		.footer {
			position: fixed;
			padding: 24rpx 32rpx;
			box-sizing: border-box;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 132rpx;
			z-index: 99999999999;
			background-color: #FFFFFF;
			/deep/ .van-button--round {
				opacity: 0.3;
			}
		}
	}
	.contaner::-webkit-scrollbar {
     display: none; /* Chrome Safari */}.l-emiy {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #666666;
	font-size: 32rpx;
}
.item1::-webkit-scrollbar {
			display: none; /* Chrome Safari */
	}
	.text {
		// 展示两行出现...
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}
</style>
